<template>
  <div>
    <h2>账户密码登录页面</h2>
    <div class="countlogin">
      <div class="outer_label">
        <img class="inner_label" src="../../assets/login.jpg">
      </div>
      <div class="how">
        <div class="count"   :class="block?'active':''"   v-on:click="one(1)">账户密码登录</div>
        <div class="iphone" :class="block?'':'active'"  v-on:click="one(2)">手机号登录</div>
      </div>
      <!-- 判断显示那个 -->
      <!-- 用户名密码 -->
      <div class="login_form" v-show="block">
        <input type="text" class="qxs-ic_user" placeholder="用户名" v-model="userName">
        <input type="text" class="qxs-ic_password" placeholder="密码" v-model="password">

        <div class="auto">
          <span>自动登录</span><span style="float: right;color: #A9A9AB">忘记密码？</span>
        </div>
        <el-button class="login_btn" @click.native="submit" type="primary" round :loading="isBtnLoading">登录</el-button>
      </div>
      <!-- 手机号验证码 -->
      <div class="login_form" v-show="!block">
        <input type="text" class="qxs-ic_user" placeholder="手机号" v-model="tel">
        <div class="qxs-ic_password">
          <input type="password" autocomplete="off" v-model="code" placeholder="请输入验证码" class="yzm">
          <button class="getCAPTCHA send" size="small" type="primary">发送验证码</button>
        </div>

       <div class="auto">
          <span>自动登录</span><span style="float: right;color: #A9A9AB">忘记密码？</span>
        </div>
        <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CountLogin",
    data() {
      return {
        userName: "",
        password:'',
        tel:"",
        code:'',
        isBtnLoading: false,
        block:true,
      }
    },
    computed: {
      btnText() {
        if (this.isBtnLoading) return '登录中...';
        return '登录';
      }
    },
    methods:{
      one(val) {
        if(val==1){
          console.log(1111)
          this.block=true//点击之后true变false隐藏了
        }
        if(val==2){
          console.log(222)
          this.block=false//点击之后!true变false出现了
        }
     },
      async submit() {
        //弹框信息
        if (!this.userName) {
          this.$message.error('请输入用户名');
          return;
        }
        if (!this.password) {
          this.$message.error('请输入密码');
          return;
        }
        //获取输入登录信息
        let obj = {
          name: this.userName,
          psw: this.password
        }
        console.log(obj)
        //调用登录接口
        // login().then(res=>{

        // })
        this.$router.push("/work")
      }
      , async login() {
          if (!this.tel) {
            this.$message.error('手机号');
            return;
          }
          if (!this.code) {
            this.$message.error('请输入验证码');
            return;
          }
          //获取输入登录信息
          let obj = {
            tel: this.tel,
            code: this.code
          }
          console.log(obj)
          //调用登录接口
          // login().then(res=>{
  
          // })
          // let obj = {
          //   molie: this.tel,
          //   sms_code: this.code,
          //   type: '2'
          // }
          // login(obj).then(res=>{//登录的接口
          //   if(res.code===200){
          //        //取出来token用
  
          //   }
  
          // })
          //跳转到工作台首页
          this.$router.push("/work")
        }
    }
    ,
    created() {
      if (JSON.parse(localStorage.getItem('user')) && JSON.parse(localStorage.getItem('user')).userName) {
        this.userName = JSON.parse(localStorage.getItem('user')).userName;
        this.password = JSON.parse(localStorage.getItem('user')).password;
      }
    }
  };
</script>

<style scoped>
  .countlogin {
    background: #eee;
    width: 500px;
    margin: auto;
  }

  .outer_label {
    /* width: 500px; */
    height: 100px;
    margin: 10px 140px;
  }

  .inner_label {
    width: 100%;
    height: 80px;

  }

  .login_form {
    width: 360px;
    margin: auto;
  }

  .how {
    width: 300px;
    height: 40px;

  }

  .qxs-ic_user {
    width: 360px;
    height: 40px;
    margin: 10px auto;
    border: none;
    border-radius: 3px;
  }

  .qxs-ic_password {
    width: 360px;
    height: 40px;
    margin: 10px auto;
    border: none;
    border-radius: 3px;
  }

  .auto {
    width: 400px;
    height: 40px;
    margin: auto;
    line-height: 40px;
  }

  .login_btn {
    width: 200px;
    height: 40px;
    margin-left: 120px;
  }

  .how {
    width: 360px;
    height: 40px;
    margin: auto;
    text-align: center;
    line-height: 40px;
    display: flex;
  }

  .count {
    width: 180px;
    height: 40px;
  }

  .iphone {
    width: 180px;
    height: 40px;
  }

  .active {
    border-bottom: 3px solid rgb(8, 146, 226);
  }
  .yzm{
      width: 220px;
      height: 40px;
      border: none;
      border-radius:2px;
    }
    .send{
      width: 135px;
      height: 42px;
      border: none;
      border-radius:2px;
      background: #fff;
    }
</style>